<template>
<div class="app-container">

    <el-form :inline="true">
        <el-form-item>
            <el-input v-model="name" placeholder="商品名称" />
        </el-form-item>
        <el-form-item>
            <el-select v-model="type" clearable placeholder="商品种类">

                <el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="success" icon="el-icon-search" @click="getGoodsList()">查询</el-button>
        </el-form-item>

        <router-link :to="'/basic/addGoods/'">
            <el-button type="primary" icon="el-icon-check">增加</el-button>
        </router-link>
    </el-form>

    <el-table v-loading="listLoading" :data="goodsList" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="商品名称" prop="goods.name">
        </el-table-column>
        <el-table-column align="center" label="商品类型" prop="goodstype">
        </el-table-column>
        <!--图片展示-->
        <el-table-column header-align="center" align="center" label="商品图片">
            <template slot-scope="scope">
                　　　　<img :src="scope.row.url" style="width: 90px; height: 90px" class="head_pic" />
                　　</template>
        </el-table-column>

        <el-table-column align="center" label="操作">
            <template slot-scope="scope">

                <router-link :to="'/basic/issueGoods/'+scope.row.goods.id">
                    <el-button size="mini" type="success" v-if="scope.row.goods.status==1" icon="el-icon-check">发布</el-button>

                </router-link>
                <el-button size="mini" type="success" v-if="scope.row.goods.status!=1" icon="el-icon-check" disabled>已发布</el-button>
                <router-link :to="'/basic/editGoods/'+scope.row.goods.id">
                    <el-button size="mini" type="primary" icon="el-icon-edit">修改</el-button>
                </router-link>

                <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeById(scope.row.goods)">删除</el-button>
            </template>

        </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[5, 10, 20]" style="padding: 30px 0; text-align: center" layout="sizes, prev, pager, next, jumper, ->, total" @current-change="changeCurrentPage" @size-change="changePageSize" />
</div>
</template>

<script>
export default {
    data: function () {
        return {
            total: 0,
            goodsList: [],
            listLoading: true,
            page: 1,
            limit: 5,
            imgUrl: '',
            types: [{
                    id: 1,
                    name: '小物件'
                },
                {
                    id: 2,
                    name: '动漫手办'
                },
                {
                    id: 3,
                    name: '仿真古玩'
                },
                {
                    id: 4,
                    name: '书法画作'
                },
                {
                    id: 5,
                    name: '其他'
                },
                {
                    id: 6,
                    name: '书籍课本'
                }
            ],
            name: '',
            type: '',
            disabled: false
        }
    },
    created() {
        this.getGoodsList();
    },
    methods: {
        //获取拍品列表
        getGoodsList() {
            this.listLoading = true
            this.axios({
                url: 'http://localhost:8888/goods/auction/goods/goodsListPage',
                method: 'get',
                params: {
                    page: this.page,
                    limit: this.limit,
                    name: this.name,
                    type: this.type
                }

            }).then(res => {
                this.total = res.data.data.total;
                this.goodsList = res.data.data.records;
                console.log(this.goodsList)
                this.listLoading = false

            })

        },
        removeById(id) {

            console.log(id)
        },
        changeCurrentPage(page) {
            this.page = page;
            this.getGoodsList();
        },
        changePageSize(size) {
            this.limit = size;
            this.getGoodsList();
        }
    }

}
</script>

<style>

</style>
